﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>产品选择</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            padding: 15px;
            background: #f5f5f5;
            margin: 0;
            height: 100vh;
        }
        .search-container {
            background: #fff;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,.1);
        }
        .table-container {
            background: #fff;
            margin: 0;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,.1);
            overflow: hidden;
        }
        .search-form .layui-form-item {
            margin-bottom: 15px;
        }
        .toolbar {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            background: #fafafa;
        }
        .layui-form-label {
            width: 80px;
            text-align: right;
            padding: 9px 15px 9px 0;
            font-weight: 500;
        }
        .layui-input-block {
            margin-left: 95px;
        }

        .select-btn {
            background: #1E9FFF;
            color: white;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .select-btn:hover {
            background: #009688;
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0,150,136,.3);
        }
        .layui-btn {
            border-radius: 4px;
            transition: all 0.3s;
        }
        .layui-input {
            border-radius: 4px;
            transition: border-color 0.3s;
        }
        .layui-input:focus {
            border-color: #1E9FFF;
            box-shadow: 0 0 0 2px rgba(30,159,255,.1);
        }
    </style>
</head>
<body>
    <!-- 搜索条件区域 -->
    <div class="search-container">
            <form class="layui-form search-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="code" placeholder="请输入产品编码" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" placeholder="请输入产品名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <div style="text-align: right; padding: 9px 0;">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="searchBtn">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 10px;">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <!-- 工具栏 -->
            <div class="toolbar">
                <span style="font-size: 14px; color: #666; font-weight: 500;">
                    <i class="layui-icon layui-icon-tips" style="color: #1E9FFF;"></i> 
                    双击行或点击选择按钮来选择产品
                </span>
                
                <div style="float: right;">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="refreshBtn">
                        <i class="layui-icon layui-icon-refresh"></i> 刷新
                    </button>
                </div>
            </div>

            <!-- 数据表格 -->
            <table class="layui-hide" id="productTable" lay-filter="productTable"></table>
        </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs select-btn" lay-event="select">
            <i class="layui-icon layui-icon-ok"></i> 选择
        </a>
    </script>

    <script>
        layui.use(['table', 'form', 'layer'], function() {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 当前搜索条件
            var currentSearchData = {
                code: '',
                name: '',
                page: 1,
                limit: 10
            };

            // 初始化表格
            var tableIns = table.render({
                elem: '#productTable',
                url: '/CustomerOrder/GetProductInfoRelation',
                method: 'GET',
                where: currentSearchData,
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                parseData: function(res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.pageCount || 0,
                        "data": res.listDate || []
                    };
                },
                cols: [[ 
                    {field: 'productCode', title: '产品编码', width: 200, sort: true},
                    {field: 'productName', title: '产品名称', width: 250},
                    {field: 'productSpec', title: '产品规格', width: 200},
                    {title: '操作', width: 120, templet: '#operationTpl', fixed: 'right', align: 'center'}
                ]],
                skin: 'line',
                even: true,
                page: true,
                limit: 10,
                height: 350,
                loading: true
            });

            // 搜索功能
            form.on('submit(searchBtn)', function(data) {
                var searchData = data.field;
                
                // 更新搜索条件
                currentSearchData.code = searchData.code || '';
                currentSearchData.name = searchData.name || '';
                currentSearchData.page = 1; // 重置到第一页

                // 重新加载表格
                table.reload('productTable', {
                    where: currentSearchData,
                    page: {
                        curr: 1
                    }
                });

                return false;
            });

            // 重置搜索
            $('button[type="reset"]').on('click', function() {
                $('.search-form')[0].reset();
                
                // 重置搜索条件
                currentSearchData = {
                    code: '',
                    name: '',
                    page: 1,
                    limit: 10
                };

                // 重新加载表格
                table.reload('productTable', {
                    where: currentSearchData,
                    page: {
                        curr: 1
                    }
                });
            });

            // 刷新按钮
            $('#refreshBtn').on('click', function() {
                table.reload('productTable', {
                    where: currentSearchData
                });
                layer.msg('刷新成功');
            });

            // 选择产品函数
            function selectProduct(data) {
                if (parent.window.productSelectCallback) {
                    parent.window.productSelectCallback({
                        code: data.productCode,
                        name: data.productName,
                        spec: data.productSpec
                    });
                } else {
                    layer.msg('回调函数未找到', {icon: 2});
                }
            }

            // 行工具事件
            table.on('tool(productTable)', function(obj) {
                var data = obj.data;
                if (obj.event === 'select') {
                    selectProduct(data);
                }
            });

            // 双击行选择
            table.on('row(productTable)', function(obj) {
                selectProduct(obj.data);
            });

            // 监听分页
            table.on('page(productTable)', function(obj) {
                currentSearchData.page = obj.curr;
                currentSearchData.limit = obj.limit;
            });
        });
    </script>
</body>
</html>